<template>
	<div>
		<div style="padding-bottom: 10px;">
			<el-input v-model="q.name" placeholder="请输入姓名或帐号" style="width: 200px;"  @keyup.enter.native="search" clearable/>
			<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
			<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
		</div>
		<el-row>
			<el-col :span="4">
				<el-card :style="{height:height}">
					<div slot="header">
						<span>权限</span>
					</div>
					<el-tree :data="dictData" :props="dictProps" node-key="dict_id" :expand-on-click-node="false" default-expand-all ref="dictTree" @current-change="handleDictClick" highlight-current/>
				</el-card>
			</el-col>
			<el-col :span="20">
				<el-card :style="{height:height}" v-loading="isLoading">
					<template v-if="title!==''">
						<div slot="header">
							<span>{{title}}</span>
							<div style="float:right;">
								<el-button style="padding:5px 10px; margin:0px 5px;" type="primary" @click="showAddDialog" v-show="this.title!='搜索结果'">添加</el-button>
								<el-button style="padding:5px 10px; margin:0px 5px;" type="danger" @click="delUserVal(multipleSelection)">删除</el-button>							
								<el-input v-model="user_key" size="mini" placeholder="请输入姓名或帐号" style="width:200px; padding:0px 5px;"  @keyup.enter.native="get_entity_right_user(currentDict.dict_id,user_key)" clearable/>
								<el-button style="padding:5px 10px;" type="primary" @click="get_entity_right_user(currentDict.dict_id,user_key)">搜索</el-button>							
							</div>
						</div>
						<el-table size="small" :data="userValData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" stripe :header-cell-style="{background:'#E3E3E3'}" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column align="center" label="序号" width="50px" fixed="left">
								<template slot-scope="scope">
									{{ scope.$index+1 }}
								</template>
							</el-table-column>
							<el-table-column align="center" prop="user_name" label="姓名"/>
							<el-table-column align="center" prop="val" label="权限值"/>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">									
									<el-button type="text" size="mini" icon="el-icon-delete" @click="delUserValSingle(scope.row.entity_right_key)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage" :page-sizes="[5,10, 20, 50, 100]" 
							:page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="userValData.length" style="margin-top: 15px;"/>
					</template>		
				</el-card>
			</el-col>
		</el-row>
		
		<!-- 为用户添加权限 start -->
		<el-dialog title="添加用户权限" :visible.sync="addDialogVisible">
			<el-select v-model="selectedUser" placeholder="请选择用户" filterable multiple>
				<el-option v-for="item in userData" :key="item.user_key" :label="item.user_name" :value="item.user_key" />
			</el-select>
			<el-select v-model="selectedVal" placeholder="请选择权限" clearable filterable>
				<el-option v-for="(item,index) in dictRightData" :key="index" :label="item.val" :value="item.val" />
			</el-select>
			<span slot="footer">
			    <el-button @click="handleClose">取 消</el-button>
			    <el-button type="primary" @click="insert_entity_right">确 定</el-button>
			</span>					
		</el-dialog>
		<!-- 为用户添加权限 end -->
	</div>
</template>

<script>
	import { query, apiparas, execute } from '../../api/api';
	export default {
		data() {
			return {
				height:document.documentElement.clientHeight*0.8 + 'px',
				q: {
					name: ''
				},
				dictData: [],
				dictRightData:[],
				currentDict: '',
				dictProps: {
					id: 'dict_id',
					children: 'subs',
					label: 'detail_name'
				},
				userValData: [],
				userData: [],
				addDialogVisible:false,
				selectedUser:[],
				selectedVal:'',
				isLoading:false,
				searchVisible:false,
				title:'',
				multipleSelection:[],
				//分页
				currentPage: 1,
				pagesize: 10,
				user_key:''//搜索
			};
		},
		mounted() {
			this.get_dict();
			this.get_user();
		},
		methods: {
			get_dict() {
				let jsonparas = [{ "name": "dict_key", "value": "108" }];
				let _paras = apiparas.getParas('default', 'sys|get_dict', jsonparas);
				query(_paras).then(response => {
					this.dictData = response.result;
				});
			},
			get_entity_right_val(dictId){
				let jsonparas = [{"name":"dict_id","value":dictId}];
				let _paras = apiparas.getParas('default', 'sys|get_entity_right_val', jsonparas);
				query(_paras).then(response => {
					this.dictRightData = response.result;
				});		
			},
			get_user() {
				let jsonparas = [{ "name": "user_name", "value": "" }];
				let _paras = apiparas.getParas('default', 'basic|get_user', jsonparas);
				query(_paras).then(response => {
					this.userData = response.result;
				});
			},
			handleDictClick(data, node) {
				this.currentPage = 1;
				this.currentDict = data;
				this.title = this.currentDict.detail_name;
				this.get_entity_right_user(this.currentDict.dict_id);
				this.get_entity_right_val(this.currentDict.dict_id);
			},
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			get_entity_right_user(dictId, userId) {
				this.isLoading = true;
				this.currentPage = 1;
				let jsonparas = [
					{"name": "dict_id","value": dictId|| ""},
					{"name": "user_id","value": userId || ""}
				];
				let _paras = apiparas.getParas('default', 'sys|get_entity_right_user', jsonparas);
				query(_paras).then(response => {
					this.userValData = response.result;
					this.isLoading = false;
				});
			},
			delUserValSingle(key){
				this.$confirm('确认要删除吗?', '提示', {
					confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
				}).then(() => {
					let keys = [];
					let obj = {"entity_right_key":key};
					keys.push(obj);
					this.delUserVal(keys);
				}).catch((e) => {
					this.$message({type: 'error', message: '已取消删除'});
				});
			},
			delUserVal(keys) {
				if(keys===null || keys.length<=0){
					this.$notify.error({ title: '错误', message: '请选择用户' });
					return;
				}
				let entityRrightKey = [];
				for(let obj of keys){
					entityRrightKey.push(obj.entity_right_key);
				}
				let jsonparas = [{ "name": "entity_right_key", "value": entityRrightKey.join(",") }];
				let _paras = apiparas.getParas('default', 'sys|delete_entity_right', jsonparas);
				query(_paras).then(response => {
					if(response.errid == 0) {
						this.$notify({ title: '提示',message: '删除成功',type: 'success' });
						this.title==='搜索结果' ? this.get_entity_right_user('',this.q.name) : this.get_entity_right_user(this.currentDict.dict_id);
					} else {
						this.$notify.error({ title: '错误',message: response.errmsg });
					}					
				});
			},
			showAddDialog(){
				this.addDialogVisible = true;
			},
			insert_entity_right(){
				if(this.selectedUser===null || this.selectedUser.length===0 || this.selectedVal===null || this.selectedVal===''){
					this.$notify.error({title: '错误',message: '请选择用户或权限'});
					return;
				}
				let jsonparas=[
					{"name": "users","value": this.selectedUser.join(",")},
					{"name": "dict_id","value": this.currentDict.dict_id},
					{"name": "val","value": this.selectedVal}
				];
				let _paras = apiparas.getParas('default','sys|insert_entity_right',jsonparas);
				execute(_paras).then(response=>{
					if(response.errid === 0){
						this.$message({ showClose: true, message: '成功', type: 'success'});
						this.get_entity_right_user(this.currentDict.dict_id);
						this.handleClose();
					}else{
						this.$notify.error({title: '错误',message: response.errmsg});
					}
				});					
			},
			handleClose(){
				this.selectedUser = [];
				this.selectedVal = [];
				this.addDialogVisible = false;
			},
			resetQuery() {
				this.q = { name: '' }
			},
			search(){
				this.title = '搜索结果';
				this.currentPage = 1;
				this.get_entity_right_user('',this.q.name);
			},
			//假分页
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			}
		}
	}
</script>

<style scoped>

</style>
